<template>
  <div class="khtablemain">
    <el-page-header :content="titles" @back="$router.back()" />
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      style="margin-top: 20px;"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户姓名" prop="khname">
        <el-input v-model="ruleForm.khname" />
      </el-form-item>
      <el-form-item label="客户地区" prop="khdq">
        <!-- <el-select v-model="ruleForm.khdq" placeholder="请选择客户地区">
					<el-option label="沈阳" value="沈阳"></el-option>
					<el-option label="大连" value="大连"></el-option>
				</el-select> -->

        <el-select v-model="ruleForm.khdq" filterable placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户电话" prop="khtel">
        <el-input v-model="ruleForm.khtel" />
      </el-form-item>

      <el-form-item label="图片信息">
        <el-upload
          class="upload-demo"
          drag
          name="file"
          :action="fileUpload"
          :headers="headerstoken"
          :show-file-list="false"
          :on-success="imagesuccess"
          multiple
        >

          <template #trigger>
            <div v-if="ruleForm.images">
              <el-image :src="ruleForm.images" />
            </div>
            <div v-else>
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

            </div>
          </template>

          <template #tip>
            <div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <!-- 	<el-form-item label="活动性质" prop="type">
				<el-checkbox-group v-model="ruleForm.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式" prop="desc">
				<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item> -->
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getToken
} from '@/utils/auth'
import store from '@/store'
export default {
  name: 'GoodFrom',
  props: ['id'], // 接收ID
  data() {
    return {
      ruleForm: {
        khname: '',
        khdq: '',
        khtel: '',
        khid: '',
        images: ''
      },
      rules: {
        khname: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 15,
          message: '长度在 3 到 15 个字符',
          trigger: 'blur'
        }
        ],
        region: [{
          required: true,
          message: '请选择活动区域',
          trigger: 'change'
        }],
        khdq: [{
          required: true,
          message: '请您输入客户地区',
          trigger: 'change'
        }],
        khtel: [{
          required: true,
          message: '请您输入电话号码',
          trigger: 'blur'
        }]
      },
      loading: false,
      titles: '',
      value: '', // 下拉框的值
      options: [], // 下拉框的列表
      token: '', //
      fileUpload: '', // imageURl地址
      headerstoken: {
        'x-token': getToken()
      }
    }
  }, mounted() {
    // 如果ID不是为空，那么就得调用详情了
    if (this.id) {
      this.titles = '编辑客户'
      // console.log('传值过来的数据', this.id)
      this.$store.dispatch('khtable/getkhtablekhid', { khid: this.id })
        .then(res => {
          if (res.code == 0) {
            // this.tableData = res.data;

            // console.log('单个获取', res.data)
            this.ruleForm.khdq = res.data.khdq
            this.ruleForm.khname = res.data.khname
            this.ruleForm.khtel = res.data.khtel
            this.ruleForm.khid = res.data.khid

            // 		khname: '',
            // khdq: '',
            // khtel: '',
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    } else {
      this.titles = '新增客户'
    }
  },
  // 加载界面的时候执行
  created() {
    this.Cityquery()
    // 获取token信息
    this.token = getToken()
    // console.log('token', this.token)
    this.fileUpload = store.getters.fileUpload
    // console.log('测试-fileUpload', this.fileUpload);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.id) {
            // console.log('123132123')
            this.ruleForm.khid = this.id
          }
          this.$store.dispatch('khtable/khtableadd', this.ruleForm)
            .then(res => {
              if (res.code == 0) {
                this.loading = false
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.$router.back()
                  }
                })
              } else {
                this.loading = false
                this.$message.error(res.msg)
                return
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 查询下拉框
    Cityquery() {
      this.$store.dispatch('khtable/Cityquery', {})
        .then(res => {
          if (res.code == 0) {
            this.options = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    },
    // 图片回调
    imagesuccess(res) {
      // console.log('成功的回调', res);
      this.ruleForm.images = store.getters.apiurl + res.data
      console.log(this.ruleForm.images)
    }
  }
}
</script>

<style lang="scss">
.khtablemain {
	margin: 20px;
	;
	.el_image{
		display: block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
}
</style>
